<template>
  <div :bordered="false">
    <a-menu style="float: left;width: 300px;height: calc(100vh - 140px);overflow-y: scroll" mode="vertical" @click="handleClick">
      <a-menu-item-group key="g1">
        <template slot="title"><span>流程名称</span> </template>
        <a-menu-item v-on:click="flowClick(flow)" :key="flow.id" v-for="flow in flows">
          {{ flow.name }}
        </a-menu-item>
      </a-menu-item-group>
    </a-menu>
    <a-tabs v-model="index" style="float: left;width: calc(100% - 300px)" default-active-key="1" @change="getFlowForm">
      <a-tab-pane key="1" tab="流程图" style="text-align: center">
        <img v-if="flowsImage" :src="'data:image/png;base64,'+flowsImage" alt="" style="max-width: 100%">
        <a-empty v-else />
      </a-tab-pane>
      <a-tab-pane key="2" tab="表单">
        <component v-if="flowForm&&flowForm!=''" :is="comps[flowForm.indexOf('|')!=-1?flowForm.substring(0,flowForm.indexOf('|')):flowForm]" ref="modalForm" ></component>
        <a-empty v-else />
      </a-tab-pane>
      <a-tab-pane key="3" tab="说明">
        <div v-if="flowForm&&flowForm.indexOf('|')!=-1" v-html="flowForm.substring(flowForm.indexOf('|')+1,flowForm.length)"></div>
        <a-empty v-else />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import { getAction,deleteAction,putAction,postAction} from '@/api/manage'
  import moment from "moment"
  export default {
    name: "FlowDescriptionList",
    components: {
    },
    mounted () {
      this.toUrl();
    },
    created () {
      this.getFlows()
    },
    data () {
      return {
        index:'1',
        comps: [],
        flowForm:'',
        flowKey:'',
        flowsImage:'',
        flows:[],
        url: {
          getFlowForm:'/base/tpExpenditureAllocationInfo/getForm/',
          getFlowImage:'/handle/getNoProgressPic/',
          getFlows:"/act/procdef/queryLastVersionList",
          list: "/act/procdef/list",
          delete: "/act/model/delete",
          deleteBatch: "/act/model/deleteBatch",
          exportXlsUrl: "model/model/exportXls",
          importExcelUrl: "model/model/importExcel",
       },

    }
  },
  computed: {
  },
    methods: {
      toUrl(){
        let resultComps = {}
        let requireComponent = require.context(
          '../../views/', // 在views目录下查找
          true, // 遍历子文件夹
          /\.vue$/ // 正则匹配 以 .vue结尾的文件
        )
        requireComponent.keys().forEach(fileName => {
          let comp = requireComponent(fileName)
          resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
        })
        this.comps = resultComps
      },
      getFlowForm(index){
        if(index=='2' || index=='3'){

            getAction(this.url.getFlowForm+this.flowKey).then(res=>{
              this.flowForm=res.result
              console.log(this.flowForm,"flowForm")
            })

        }

      },
      flowClick(flow){
        this.flowKey=flow.key
        getAction(this.url.getFlowImage+flow.key).then(res=>{
          this.flowsImage=res
          this.index='1'
        })
      },
      handleClick(e) {
        console.log('click ', e);
      },
      getFlows(){
        getAction(this.url.getFlows).then(res=>{
            this.flows=res
        })
      },


    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background-color: #e6f7ff !important;
  }


</style>